<template>
	<view class="page_view">
		<scroll-view :scroll-y="true" class="content_view" :scroll-top="scrollTop">
			<view class="content_view_goods">
				<image src="" class="content_view_goods_img" mode=""></image>
				<view class="content_view_goods_right">
					<view class="text-line-1 content_view_goods_title">
						美澳进口芦荟通常胶囊72粒/瓶大豆膳食纤维西洋参荷叶胶囊
					</view>
					<view class="content_view_goods_price">
						¥ <text class="content_view_goods_price_num">518</text>.00
					</view>
				</view>
			</view>
			<view class="list_view">
				<view class="list" v-for="(item,index) in list">
					<view class="list-left" v-if="!item.my">
						<image src="" class="list-left-head" mode=""></image>
						<view class="list-left-text" v-if="item.text">
							{{item.text}}
						</view>
						<image :src="item.img" class="list-left-img" mode="heightFix" v-if="item.img"></image>
					</view>
					<view class="list-right" v-if="item.my">
						<image src="" class="list-left-head" mode=""></image>
						<view class="list-right-text" v-if="item.text">
							{{item.text}}
						</view>
						<image :src="item.img" class="list-right-img" mode="heightFix" v-if="item.img"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<view class="bottom_flex">
				<view class="bottom_flex_left">
					<u-icon name="server-fill" class="new_icon_icon"></u-icon>
					<view class="new_icon_icon_text">
						平台介入
					</view>
				</view>
				<input type="text" placeholder="描述您的问题" v-model="messg_val" class="im_input">
				<image src="/static/images/home/Image@2x.png" @tap="choose_img" class="send_img" mode=""></image>
				<view class="send_btn" @tap="send_messg" @touchend.prevent="send_messg">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 0,
						text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
						my: false,
						img: '',
					},
					{
						id: 1,
						text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
						my: true,
						img: '',
					}
				],
				messg_val: '',
				num: 1,
				scrollTop:2000000000,
			}
		},
		onLoad(option) {
			// uni.setNavigationBarTitle({
			// 	title: '固特异汽车用品自营旗舰店'
			// })
			// 判断是否通过商品进来 1.0.2升级
			if (option.hasOwnProperty('goods')) {
				this.goods = JSON.parse(option.goods);
				setTimeout(()=> {
					this.isGoods = false;
				}, 5000);
			}
			// 临时关闭推送
			this.$store.commit('chat/setIschat', {notice: false});
			// 查看权限 1.0.2升级 追加商家在线状态 
			this.$post({
				url: '/wanlshop/chat/getShopChat',
				data: {
					id: option.shop_id?option.shop_id:'null',
					type: 'chat'
				}
			}).then(res=>{
				console.log('------')
				this.to_id = res.user_id;
				this.shop_id = res.id;
				// 新版新追加
				this.shop_name = res.shopname == undefined?'固特异汽车用品自营旗舰店':res.shopname;
				this.shop_avatar = res.avatar;
				this.$wanlshop.title(this.shop_name + (res.isOnline == 1 ? '-在线':'-离线'));
				// 初始界面
				this.getMsgList(res.user_id);
			});
			// this.getMsgList()
		},
		methods: {
			getMsgList(id) {
				// 消息列表
				uni.getStorage({
					key: 'wanlchat:message_' + id,
					success: res => {
						var list = res.data;
						for (let i = 0; i < list.length; i++) {
							// 获取消息中的图片,并处理显示尺寸
							if (list[i].type == 'chat' && list[i].message.type == 'img') {
								list[i].message.content = this.setPicSize(list[i].message.content);
								this.msgImgList.push(list[i].message.content.url);
							}
							// 获取消息中表情，并处理为图片
							if (list[i].type == 'chat' && list[i].message.type == 'text') {
								list[i].message.content.text = this.replaceEmoji(list[i].message.content.text);
							}
						}
						this.msgList = list;
						// 滚动到底部
						this.bottom_scroll()
						// this.$nextTick(() => {
						// 	//进入页面滚动到底部
						// 	this.scrollTop = 9999;
						// 	this.$nextTick(() => {
						// 		this.scrollAnimation = true;
						// 	});
						// });
					}
				});
			},
			send_messg() {
				let str = this.messg_val.replace(/\s*/g,"");
				let str1= this.messg_val.replace(/^\s|\s$/g,"");
				if(this.messg_val && str.length >0 && str1.length >0){
					let id = this.num + 1
					let data = {
						id: id,
						text: this.messg_val,
						my: true,
						img: '',
					}
					this.list.push(data)
					this.messg_val = ''
					this.bottom_scroll()
				}
				
			},
			async choose_img() {
				//#ifdef APP-PLUS				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')					console.log(result)				if (result !== 1) return
				this.$store.state.isCAMERA = true				// #endif
				
				let that = this
				uni.chooseImage({
					count: 1,
					success(res) {
						let id = this.num + 1
						let data = {
							id: id,
							text: '',
							my: true,
							img: res.tempFilePaths[0],
						}
						that.list.push(data)
						that.bottom_scroll()
					},
					fail() {

					}
				})
			},
			bottom_scroll() {
				setTimeout(()=>{
					this.scrollTop += 100 
				},200)
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F4F4F4;
	}
	.page_view{
		/* min-height: 100vh; */
		/* background-color: #F4F4F4; */
	}

	.content_view {
		height: 84vh;
		width: 100%;
		padding: 0 12rpx;
		box-sizing: border-box;
		/* overflow-y: auto; */
		/* padding-bottom: 200rpx; */
		/* border: #262626 solid 1rpx; */
	}

	.bottom {
		width: 100%;
		height: 154rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.bottom_flex {
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
	}

	.content_view_goods {
		width: 100%;
		height: 138rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		position: relative;
		top: 20rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_view_goods_img {
		min-width: 80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		border: 2rpx solid #F4F4F4;
		margin-right: 20rpx;
	}

	.content_view_goods_title {
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #333333;
	}

	.content_view_goods_price_num {
		font-size: 28rpx;
	}

	.content_view_goods_price {
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E42D1D;
		margin-top: 12rpx;
	}

	.list_view {
		margin-top: 82rpx;
	}

	.list {
		margin-top: 32rpx;
	}

	.list-left {
		display: flex;
	}

	.list-left-head {
		min-width:48rpx ;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background-color: #333333;
	}

	.list-left-text {
		max-width: 70vw;
		/* width: 222rpx; */
		/* height: 78rpx; */
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 0rpx;
		padding: 22rpx 12rpx;
		position: relative;
		top: -22rpx;
		margin-left: 23rpx;
	}

	.list-right-text {
		max-width: 70vw;
		/* width: 222rpx; */
		/* height: 78rpx; */
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 0rpx 22rpx;
		padding: 22rpx 12rpx;
		position: relative;
		top: -22rpx;
		margin-right: 23rpx;
	}

	.list-left-img {
		max-width: 60vh;
		margin-left: 23rpx;
	}

	.list-right-img {
		max-width: 60vh;
		margin-right: 23rpx;
	}

	.list-right {
		display: flex;
		flex-direction: row-reverse;
	}

	.bottom_flex_left {
		text-align: center;
	}

	.new_icon_icon {
		font-size: 26rpx;
	}

	.new_icon_icon_text {
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #262626;
	}

	.im_input {
		color: #999999;
	}

	.im_input {
		width: 380rpx;
		height: 72rpx;
		background: #EEEEEE;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #262626;
		padding:0 12rpx;
		box-sizing: border-box;
	}

	.send_img {
		width: 48rpx;
		height: 48rpx;
	}

	.send_btn {
		width: 120rpx;
		height: 50rpx;
		background-color: #3CBF59;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
	}
</style>